document.addEventListener('DOMContentLoaded', function() {
    const slider = document.querySelector('.imgs ul');
    const slides = document.querySelectorAll('.imgs li');
    const prevButton = document.querySelector('.imgs .prev');
    const nextButton = document.querySelector('.imgs .next');
    
    let currentSlide = 0;
    const slideCount = slides.length;
    

    let slideInterval = setInterval(nextSlide, 5000);
 
    function updateSlider() {
        const offset = currentSlide * (100 / slideCount);
        slider.style.transform = `translateX(-${offset}%)`;
    }
    

    function nextSlide() {
        currentSlide = (currentSlide + 1) % slideCount;
        updateSlider();
    }
    
   
    function prevSlide() {
        currentSlide = (currentSlide - 1 + slideCount) % slideCount;
        updateSlider();
    }
    
   
    nextButton.addEventListener('click', () => {
        clearInterval(slideInterval);
        nextSlide();
        slideInterval = setInterval(nextSlide, 5000);
    });
    
    prevButton.addEventListener('click', () => {
        clearInterval(slideInterval);
        prevSlide();
        slideInterval = setInterval(nextSlide, 5000);
    });
    
    
    slider.addEventListener('mouseenter', () => {
        clearInterval(slideInterval);
    });
    

    slider.addEventListener('mouseleave', () => {
        slideInterval = setInterval(nextSlide, 5000);
    });

    // 技术栈选择按钮交互
    const techButtons = document.querySelectorAll('.tech-btn');
    
    techButtons.forEach(button => {
        button.addEventListener('click', function() {
            // 移除其他按钮的active类
            techButtons.forEach(btn => btn.classList.remove('active'));
            // 为当前点击的按钮添加active类
            this.classList.add('active');
        });
    });
}); 